<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			/* 被选中时的颜色 */
			.mui-active .mui-icon,
			.mui-active .mui-tab-label {
				color: deeppink;
			}
		</style>
	</head>
	<body>
		<!-- 底部选项卡 mtab -->
		<nav class="mui-bar mui-bar-tab">
			<!-- mui-active：默认被选中 -->
			<a class="mui-tab-item mui-active" href="pages/xingfudao_index.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="pages/xingfudao_contact.html">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">通讯录</span>
			</a>
			<a class="mui-tab-item" href="pages/xingfudao_h5plus.html">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">h5plus</span>
			</a>
			<a class="mui-tab-item" href="pages/xingfudao_wode.html">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>

		<script type="text/javascript">
			mui.init();
			// 定义一个容器存放所有要关联的页面
			var pages = [
				"pages/xingfudao_index.html",
				"pages/xingfudao_contact.html",
				"pages/xingfudao_h5plus.html",
				"pages/xingfudao_wode.html",
			];
			var aniShow = {};
			// 实现底部选项卡切换功能
			/**
			 * 真机环境下才执行plusReady 且plus只在plusReady中才有
			 * 浏览器执行ready
			 */
			mui.plusReady(function() {
				// 获取当前窗口对象
				var ws = plus.webview.currentWebview();
				// 设置页面窗口样式
				var pageStyle = {
					top: '0px',
					bottom: '50px'
				};
				// 循环数组
				for (var i = 0; i < pages.length; i++) {
					// 为每个页面创建webview对象
					var page = plus.webview.create(pages[i], pages[i], pageStyle);
					// 首个选项卡页面显示，其它均隐藏；
					if (i > 0) {
						page.hide();
					}
					/* 让新创建的webview，追加合并到当前的窗口上。合并成一个窗口。
					 * 目的：将父子窗口合并成一个页面，实现同开同关的效果。 避免点击时子页面先关闭，而父页面的头部和尾部没有关闭的BUG。
					 */
					ws.append(page);
				}
				// 设置默认打开窗口 当前激活选项
				var activeTab = "pages/xingfudao_index.html";
				// 选项卡事件监听(监听mui-bar-tab类下的a标签被tap点击时，触发function)
				mui('.mui-bar-tab').on('tap', 'a', function(e) {
					// 获取被点击a标签的href属性值
					var targetTab = this.getAttribute('href');
					//如果点击的和显示的是同一个标签，则直接返回
					if (targetTab == activeTab) {
						return;
					}
					//显示目标选项卡
					//若为iOS平台或非首次显示，则直接显示
					if (mui.os.ios || aniShow[targetTab]) {
						plus.webview.show(targetTab);
					} else {
						//否则，使用fade-in动画，且保存变量
						var temp = {};
						temp[targetTab] = "true";
						mui.extend(aniShow, temp);
						plus.webview.show(targetTab, "fade-in", 300);
					}
					//隐藏当前
					plus.webview.hide(activeTab);
					//更改当前活跃的选项卡
					activeTab = targetTab;
				})
			});
		</script>
	</body>
</html>